<script setup lang="tsx">
import { PropType, ref, unref, nextTick } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElTag, ElTree } from 'element-plus'
import { findIndex } from '@/utils'
import { getRoleShowApi, getFieldEnumApi } from '@/api/role'
import { useI18n } from 'vue-i18n'
import { useEnumeratePicker } from '@/utils'

const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})

const filterPermissionName = (value: Record<string, any>) => {
  const index = findIndex(unref(currentTreeData)?.role || [], (item) => {
    return item.id === value.id
  })
  return (unref(currentTreeData)?.role || [])[index].title ?? ''
}

const renderTag = (enable?: boolean) => {
  return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
}

const treeRef = ref<typeof ElTree>()
const order_range_field_enum = ref<any[]>([])

const currentTreeData = ref()
const nodeClick = (treeData: any) => {
  currentTreeData.value = treeData
}

const treeData = ref<any[]>([])
const roleInfo = ref<any>({})
const getMenuList = async () => {
  const res = await getRoleShowApi({ id: props.currentRow.id })
  if (res) {
    roleInfo.value = res.data
    treeData.value = res.data.menu
    await nextTick()
  }
}
const getFieldEnumList = async () => {
  const res = await getFieldEnumApi({ field: 'all' })
  order_range_field_enum.value = res.data.order_range
}
onMounted(() => {
  getMenuList()
  getFieldEnumList()
})

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'name',
    label: '角色名称'
  },
  {
    field: 'status',
    label: '状态',
    slots: {
      default: (data: any) => {
        return renderTag(data.status)
      }
    }
  },
  {
    field: 'order_range',
    label: t('role.order_range'),
    slots: {
      default: (data: any) => {
        return useEnumeratePicker(order_range_field_enum.value, data.order_range)
      }
    }
  },
  {
    field: 'remark',
    label: '备注',
    span: 24
  },
  {
    field: 'permissionList',
    label: '菜单分配',
    span: 24,
    slots: {
      default: () => {
        return (
          <>
            <div class="flex w-full">
              <div class="flex-1">
                <ElTree
                  ref={treeRef}
                  node-key="id"
                  props={{ children: 'children', label: 'title' }}
                  highlight-current
                  expand-on-click-node={false}
                  data={treeData.value}
                  onNode-click={nodeClick}
                >
                  {{
                    default: (data) => {
                      return <span>{data?.data?.title}</span>
                    }
                  }}
                </ElTree>
              </div>
              <div class="flex-1">
                {unref(currentTreeData)
                  ? unref(currentTreeData)?.role?.map((v: Record<string, any>) => {
                      return <ElTag class="ml-2 mt-2">{filterPermissionName(v)}</ElTag>
                    })
                  : null}
              </div>
            </div>
          </>
        )
      }
    }
  }
])
</script>

<template>
  <Descriptions :schema="detailSchema" :data="roleInfo" />
</template>
